<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <title> 添加商品 </title>
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    <link href="http://www.builive.com/apps/default/assets/css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/global.css" rel="stylesheet">
</head>
<body>
     <div class="ws-goods">
         <div class="ws-goods__side">
             <ul class="ws-side__list">
                 <li class="ws-side__item ws-active">商品总览</li>
                 <li class="ws-side__item">详细介绍</li>
                 <li class="ws-side__item">相关商品</li>
                 <li class="ws-side__item">HTML页面参数设置</li>
             </ul>
             <div class="ws-goodsTree">
                <p class="ws-goodsTree__tit">商品标签</p>
                <ul>
                    <li>
                        <label><input type="checkbox" name="name" value="">送赠品</label>
                    </li>
                    <li>
                        <label><input type="checkbox" name="name" value="">送赠品</label>
                    </li>
                    <li>
                        <label><input type="checkbox" name="name" value="">送赠品</label>
                    </li>
                </ul>
             </div>
         </div>
         <div class="ws-goods__main">
             <ul class="ws-goods__list">
                 <li class="ws-goods__item ws-active">
                     <p class="ws-goodsTit">
                         基本信息
                     </p>
                     <div class="ws-goodsPanel">
                         <div action="" class="form-horizontal ext-goods">
                             <div class="control-group">
                               <label class="control-label">商品分类：</label>
                               <div class="controls">
                                   <select class="" name="">
                                       <option value="option">1</option>
                                       <option value="option">1</option>
                                       <option value="option">1</option>
                                   </select>
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">其它分类：</label>
                               <div class="controls">
                                   <select class="" name="">
                                       <option value="option">1</option>
                                       <option value="option">1</option>
                                       <option value="option">1</option>
                                   </select>
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">类型：</label>
                               <div class="controls">
                                   <select class="" name="">
                                       <option value="option">1</option>
                                       <option value="option">1</option>
                                       <option value="option">1</option>
                                   </select>
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">商品名称：</label>
                               <div class="controls">
                                 <input type="text" class="input-large"><span style="color: red;"> *</span>
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">商品关键词：</label>
                               <div class="controls">
                                 <input type="text" class="input-large"><span> 仅用于在前台、后台筛选商品，多个关键词用半角竖线"|"分开</span>
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">品牌：</label>
                               <div class="controls">
                                   <select class="" name="">
                                       <option value="option">1</option>
                                       <option value="option">1</option>
                                       <option value="option">1</option>
                                   </select>
                               </div>
                             </div>
                             <div class="control-group">
                                <label class="control-label">商品简介：</label>
                                <div class="controls  control-row-auto">
                                  <textarea name="" id="" class="control-row4 input-large"></textarea>
                                  <p>
                                      简短的商品介绍,请不要超过70个字
                                  </p>
                                </div>
                              </div>
                             <div class="control-group">
                               <label class="control-label">模版：</label>
                               <div class="controls">
                                   <select class="" name="">
                                       <option value="option">1</option>
                                       <option value="option">1</option>
                                       <option value="option">1</option>
                                   </select>
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">商品相册：</label>
                               <div class="controls">

                               </div>
                             </div>
                             <div class="control-group">
                                <label class="control-label">列表页图片：</label>
                                <div class="controls">
                                  <label class="radio" for=""><input type="radio">用商品相册默认图</label>&nbsp;&nbsp;&nbsp;
                                  <label class="radio" for=""><input type="radio">自定义商品列表页图片</label>
                                </div>
                              </div>
                        </div>
                     </div>
                     <div class="ws-goodsPanel">
                         <div action="" class="form-horizontal">
                             <div class="control-group">
                               <label class="control-label">销售价：</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                                 <span class="ws-btn" style="float: none;display: inline-block;" data-role="editPrice">
                                     <i class="ico-edit"></i>
                                     编辑会员价格
                                 </span>
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">成本价：</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                                 <span> 前台不会显示，仅供后台使用。</span>
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">市场价：</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">货号：</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">重量：</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                                 <span> 克(g)</span>
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">库存：</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">货位：</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                               </div>
                             </div>
                         </div>
                     </div>
                     <div class="ws-goodsPanel">
                         <div class="form-horizontal">
                             <div class="control-group">
                               <label class="control-label">计量单位：</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                               </div>
                             </div>
                             <div class="control-group">
                                <label class="control-label">立即上架：</label>
                                <div class="controls">
                                  <label class="radio" for=""><input type="radio">是</label>&nbsp;&nbsp;&nbsp;
                                  <label class="radio" for=""><input type="radio">否</label>
                                </div>
                              </div>
                              <div class="control-group">
                                 <label class="control-label">增加库存时自动上架：</label>
                                 <div class="controls">
                                   <label class="radio" for=""><input type="radio">是</label>&nbsp;&nbsp;&nbsp;
                                   <label class="radio" for=""><input type="radio">否</label>
                                 </div>
                               </div>
                               <div class="control-group">
                                 <label class="control-label">库存提示规则：</label>
                                 <div class="controls">
                                     <select class="" name="">
                                         <option value="option">1</option>
                                         <option value="option">1</option>
                                         <option value="option">1</option>
                                     </select>
                                 </div>
                               </div>
                               <div class="control-group">
                                  <label class="control-label">无库存也可销售：</label>
                                  <div class="controls">
                                    <label class="radio" for=""><input type="radio">是</label>&nbsp;&nbsp;&nbsp;
                                    <label class="radio" for=""><input type="radio">否</label>
                                  </div>
                                </div>
                                <div class="control-group">
                                  <label class="control-label">积分：</label>
                                  <div class="controls">
                                    <input type="text" class="input-large">
                                  </div>
                                </div>
                                <div class="control-group">
                                  <label class="control-label">库存关联：</label>
                                  <div class="controls">
                                    <select class="" name="">
                                        <option value="option">1</option>
                                        <option value="option">1</option>
                                        <option value="option">1</option>
                                    </select>
                                      <span style="color: red;">
                                          选择多个商品时，当前商品为礼篮类商品，库存以选择的商品为准
                                      </span>
                                  </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="height: 30px;"></label>
                                    <div class="controls ws-goodsChoose" style="height: auto;border-bottom:1px solid #e8e8e8;">
                                        <div class="ws-goodsChoose__row">
                                            <span class="ws-goodsChoose__del"></span>
                                            <span class="ws-goodsChoose__txt">12322</span>
                                            <div class="">
                                                <span class="ws-goodsChoose__inTxt">比率：</span>
                                                <input type="text" class="input-large">
                                            </div>
                                        </div>
                                        <div class="ws-goodsChoose__row">
                                            <span class="ws-goodsChoose__del"></span>
                                            <span class="ws-goodsChoose__txt">123</span>
                                            <div class="">
                                                <span class="ws-goodsChoose__inTxt">比率：</span>
                                                <input type="text" class="input-large">
                                            </div>
                                        </div>
                                        <div class="ws-goodsChoose__row">
                                            <span class="ws-goodsChoose__del"></span>
                                            <span class="ws-goodsChoose__txt">123</span>
                                            <div class="">
                                                <label class="control-label radio">
                                                  <input type="radio" name="con"> 单选框
                                                </label>
                                                <label class="control-label radio">
                                                  <input type="radio" name="con"> 单选框
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                         </div>
                    </div>
                    <div class="ws-goodsstyle">
                        <h1 class="ws-goodsstyle__tit">规格</h1>
                        <div class="button">编辑</div>
                        <div class="ws-goodsstyle__panel">
                            <ul class="">
                                <li class="tit">已经启动的规格项:</li>
                                <li>11</li>
                                <li>11</li>
                            </ul>
                            <p class="tit">
                                已生成货品(6)
                            </p>
                        </div>
                        <div class="button">关闭</div>
                    </div>
                    <p class="ws-goodsTit">
                        详细介绍
                    </p>
                    <div class="ws-goodsPanel">

                    </div>
                    <p class="ws-goodsTit">
                        手机端详细介绍
                    </p>
                    <p style="margin-left: 15px;">
                        (手机端请用小图片，否则会导致手机流量过大)
                    </p>
                    <div class="ws-goodsPanel">

                    </div>
                    <p class="ws-goodsTit">
                        相关产品
                    </p>
                    <div class="ws-goodsPanel">
                        <select class="" name="">
                            <option value="option">1</option>
                            <option value="option">1</option>
                            <option value="option">1</option>
                        </select>
                    </div>
                    <p class="ws-goodsTit">
                        SEO设置
                    </p>
                    <div class="ws-goodsPanel">
                        <div class="form-horizontal">
                            <div class="control-group">
                              <label class="control-label">Page Title</label>
                              <div class="controls">
                                <input type="text" class="input-large">
                              </div>
                            </div>
                            <div class="control-group">
                              <label class="control-label">Meta Keyword</label>
                              <div class="controls">
                                <input type="text" class="input-large">
                              </div>
                            </div>
                            <div class="control-group">
                              <label class="control-label">Meta Description</label>
                              <div class="controls">
                                <input type="text" class="input-large">
                              </div>
                            </div>
                            <div class="control-group">
                              <label class="control-label">自定义url</label>
                              <div class="controls">
                                <input type="text" class="input-large">
                              </div>
                            </div>
                        </div>
                    </div>
                 </li>
                 <li class="ws-goods__item">
                     <p class="ws-goodsTit">
                         详细介绍
                     </p>
                     <div class="ws-goodsPanel">

                     </div>
                     <p class="ws-goodsTit">
                         手机端详细介绍
                     </p>
                     <p style="margin-left: 15px;">
                         (手机端请用小图片，否则会导致手机流量过大)
                     </p>
                     <div class="ws-goodsPanel">

                     </div>
                 </li>
                 <li class="ws-goods__item">
                     <p class="ws-goodsTit">
                         相关产品
                     </p>
                     <div class="ws-goodsPanel">
                         <select class="" name="">
                             <option value="option">1</option>
                             <option value="option">1</option>
                             <option value="option">1</option>
                         </select>
                     </div>
                 </li>
                 <li class="ws-goods__item">
                     <p class="ws-goodsTit">
                         SEO设置
                     </p>
                     <div class="ws-goodsPanel">
                         <div class="form-horizontal">
                             <div class="control-group">
                               <label class="control-label">Page Title</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">Meta Keyword</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">Meta Description</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                               </div>
                             </div>
                             <div class="control-group">
                               <label class="control-label">自定义url</label>
                               <div class="controls">
                                 <input type="text" class="input-large">
                               </div>
                             </div>
                         </div>
                     </div>
                 </li>
             </ul>
         </div>
         <!-- 编辑会员价格弹窗 -->
         <div id="editPrice" class="hide">
             <table class="ws-table" border=1 style="margin: 10px auto 20px;width: 660px;">
                 <thead>
                     <tr>
                         <th>
                             会员等级
                         </th>
                         <th>
                             价格
                         </th>
                         <th>
                             折扣
                         </th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
                         <td>
                             普通会员
                         </td>
                         <td>
                             <input type="text" name="name" value="">
                         </td>
                         <td>
                             1.00
                         </td>
                     </tr>
                 </tbody>
             </table>
         </div>
     </div>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/config-min.js"></script>
    <script type="text/javascript">
        // 下拉列表
        $('.ws-goodsTree__tit').on('click', function() {
            var _this = $(this),
                $ul = _this.next('ul');
            if(_this.hasClass('ws-active')) {
                _this.removeClass('ws-active');
                $ul.show();
            } else {
                _this.addClass('ws-active');
                $ul.hide();
            }
        })

        // tab
        $('.ws-side__list li').on('click', function () {
            var index = $(this).index();
            $(this).addClass('ws-active').siblings().removeClass('ws-active');

            $('.ws-goods__list li').eq(index).addClass('ws-active').siblings().removeClass('ws-active');
        })

        // 编辑会员价格
        BUI.use(['bui/overlay','bui/form'],function(Overlay,Form){

         var dialog = new Overlay.Dialog({
               title:'编辑会员价',
               width:700,
               height:360,
               //配置DOM容器的编号
               contentId:'editPrice',
               success:function () {
                 alert('确认');
                 this.close();
               }
             });

           $('[data-role="editPrice"]').on('click',function () {
             dialog.show();
           });
         });

         // 删除当前项
         $(document).on('click', '.ws-goodsChoose__del', function() {
             $(this).parent('.ws-goodsChoose__row').remove();
         })
    </script>
</body>

</html>
